<template>
	<view class="user-center":style="'height:'+ screenHeight +'px !important;'">
		<uni-nav-bar color="#ffffff" background-color="#007AFF" :status-bar="true" title="个人中心"/>
		<view class="user-head" hover-class="user-head-click" @tap="openinfo">
			<view class="user-head-info">
				<image src="../../static/image/photo.jpg" mode="xx"></image>
				<text>昵称:xxxx</text>
			</view>
			<view class="user-head-arrow">
				<uni-icons type="forward" size="25" color="#9BA8B7"></uni-icons>
			</view>
		</view>
		
		<view class="user-divider"></view>
		<view class="example-body">
			<uni-list>
				<uni-list-item title="支付" thumb="../../static/image/icon/zhifu.png"/>
				<uni-list-item title="银行卡" thumb="../../static/image/icon/card.png"/>
				<uni-list-item title="账单" thumb="../../static/image/icon/Menu.png"/>
			</uni-list>
		</view>
		<view class="user-divider"></view>
		<view class="example-body">
			<uni-list>
				<uni-list-item title="足迹" thumb="../../static/image/icon/zuji.png"/>
				<uni-list-item title="收藏" thumb="../../static/image/icon/shoucang.png"/>
			</uni-list>
		</view>
		<view class="user-divider"></view>
		<view class="example-body">
			<uni-list>
				<uni-list-item title="设置" thumb="../../static/image/icon/setting.png"/>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		components: {uniIcons},
		data() {
			return {
				screenHeight: '',	
			}
		},
		methods: {
			openinfo(e){
				console.log(e)
				uni.navigateTo({
				    url: './info'
				});
			}
			
		},
		onLoad() {
		     this.screenHeight = uni.getSystemInfoSync().windowHeight;
		}
	}
</script>

<style scoped lang="less">
	@import url("../../static/color.less");
	@import url("../../static/fontSize.less");
	.user-center{
		width: 100%;
		height: 100%;
		background-color:@colorLightGray;
	}
	.user-head{
		background-color: @colorWrite;
		height: 200rpx;
		display: flex;
		justify-content:space-between;
		align-items:center;
	}
	.user-head-click{
		background-color:@colorLightGray;
	}
	.user-head-info{
		display: flex;
		align-items:center;
	}
	.user-head-info image{
		margin-left: 25rpx;
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}
	.user-head-info text{
		margin-left: 30rpx;
		font-size:@fontBigger;
	}
	.user-head-arrow{
		margin-right: 10px;
	}
	.user-divider{
		background-color:@colorLightGray;
		height: 30rpx;
	}
</style>
